import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';

import Input from '@kuiper-components/input';
import s from './Checkbox.module.css';

function Checkbox({
	className,
	type,
	checked,
	children,
	onChange,
	borderless,
}) {
	return (
		<span
			className={cn(
				className,
				s.checkbox,
				{
					[s.borderless]: borderless,
				},
				{
					[s.activeCheck]: checked,
				}
			)}
			// 保持组件库一致
			// onClick={e =>
			// 	onChange({ ...e, target: { ...e.target, checked: !checked } })
			// }
		>
			<Input
				rawEvent
				type={type}
				checked={checked}
				onChange={e => {
					e.stopPropagation();
					onChange(e);
				}}
			/>
			<label className={s.label}>{children}</label>
		</span>
	);
}

Checkbox.propTypes = {
	className: PropTypes.string,
	type: PropTypes.string,
	checked: PropTypes.bool.isRequired,
	children: PropTypes.node,
	onChange: PropTypes.func.isRequired,
	borderless: PropTypes.bool,
};
Checkbox.defaultProps = {
	className: s.Checkbox,
	type: 'checkbox',
	checked: false,
	borderless: false,
	onChange: () => {},
};

export default Checkbox;
